<template>
	<view class="box">
		<uNavbar title="账号信息" bgColor="transparent"></uNavbar>
		<view class="wrap_headimg" @click="getheadimg">
			<text>头像</text>
			<image class="headimg" :src="imgurl" mode="aspectFill"></image>
		</view>
		<view class="wrap_item">
			<view class="text">昵称</view>
			<input type="text" maxlength="8" :style="{ color: inputColor }"  :value="name" @input="getname" />
			<uni-icons type="right" color="#A6A5AF" class="right" size="24"></uni-icons>
		</view>
		<view class="wrap_item" @click="show=true">
			<view class="text">性别</view>
			<view class="sex" >
				{{sexval}}
			</view>
			<uni-icons type="right" color="#A6A5AF" class="right" size="24"></uni-icons>
		</view>
		<view class="wrap_item">
			<view class="text">用户等级</view>
			<view class="sex">
				{{user.level_format||"布衣"}}
			</view>
			<!-- <uni-icons type="right" color="#A6A5AF" class="right" size="24"></uni-icons> -->
		</view>
		<view class="wrap_item">
			<view class="text">账号</view>
			<view class="sex">
				{{user.account}}
			</view>
			<!-- <uni-icons type="right" color="#A6A5AF" class="right" size="24"></uni-icons> -->
		</view>
		<view class="wrap_item">
			<view class="text">手机号码</view>
			<view class="phone">
				<image @click="copy" src="../../static/icon/copy.png" mode=""></image> {{user.phone_format}}
			</view>

			<!-- <uni-icons type="right" color="#A6A5AF" class="right" size="24"></uni-icons> -->
		</view>
		<view class="wrap_item">
			<view class="text">注册时间</view>
			<view class="phone">
				{{user.create_time}}
			</view>
			<!-- <uni-icons type="right" color="#A6A5AF" class="right" size="24"></uni-icons>	 -->
		</view>
		<view class="wrap_item">
			<view class="text">个性签名</view>
		</view>
		<view class="textareas">
			<text class="surplus">{{number||0}}/{{maxlength}}</text>
			<textarea class="ipt" v-model.trim="signin" :maxlength="maxlength" @input="bindTextAreaBlur" placeholder="请输入您的个性签名" />
		</view>
		<view class="btn" @click="submit">
			<image class="highlights"  src="../../static/image/mask.png" mode=""></image>
			保存
		</view>
		<u-picker :show="show" :columns="columns" @cancel="show=false" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {baseURL} from "../../utils/request.js"
	import { getuserinfo} from "../../api/index.js"
	import {uploadImg} from "../../api/other.js"
	import {updateInfo} from "../../api/setting.js"
	export default {
		data() {
			return {
				name: '',
				show: false,
				columns: [
					['男', '女', ]
				],
				sex: 1,
				signin: "",
				user:{},
				maxlength:'50',
				imgurl:"",
				sexval:"",
				number:'',
				 inputColor: '#A7A4AD' // 初始状态为#fff
			}
		},
		onLoad() {
			this.getuser()
		},
		watch:{
			signin(val){
				console.log(val.length);
				this.number = val.length
			}
		},
		methods: {
			submit(){
				updateInfo({
					nickname:this.name,
					sex:this.sex,
					head_img:this.imgurl,
					introduce:this.signin
					
				}).then(res=>{
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
					uni.$u.toast(res.msg)
					console.log(res)
				})
			},
			getheadimg(){
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					formData: {
						'user': 'test'
					},
					success: (chooseImageRes) => {
						console.log(chooseImageRes,"999")
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: baseURL+`upload/uploadImg`,
							filePath: tempFilePaths[0],
							name: 'image',
							formData: {
							},
							success: (res) => {
								console.log(res,"99900")
								this.imgurl=JSON.parse(res.data).data.path
								//  console.log(JSON.parse(res.data).data.path,"qwdqw") 
								// console.log(res,"上传")
							}
						});
					}
				});
			},
			getuser(){
				getuserinfo().then(res=>{
					this.user=res.data
					this.name=res.data.nickname
					this.imgurl=res.data.head_img
					this.sex=res.data.sex
					this.signin=res.data.introduce
					if(this.sex==0){
						this.sexval="未知"
					}
					if(this.sex==1){
						this.sexval="男"
					}
					if(this.sex==2){
						this.sexval="女"
					}
				})
			},
			confirm(e) {
				if (e.value == "男") {
					this.sex = 1
					this.sexval="男"
				} else {
					this.sex = 2
					this.sexval="女"
				}
				this.show = false
				console.log(this.sex, "选择结果")

			},
			getname(e){
				 this.inputColor = '#fff';
				this.name=e.detail.value
			},
			bindTextAreaBlur(e) {
				console.log(e.detail.value)
				this.signin = e.detail.value
			},
			copy() {
				uni.setClipboardData({
					data:this.user.phone,
					success: function() {
						uni.showToast({
							title: "复制成功"
						})
						console.log('复制成功');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 1624rpx;
		background-color: #262342;
		
	}

	.wrap_headimg {
		width: 750rpx;
		height: 126rpx;
		position: relative;
		background-color: #262342;
		margin: 0 auto;
		margin-top: 20rpx;

		>text {
			position: absolute;
			top: 52rpx;
			left: 54rpx;
			font-size: 32rpx;
			color: #fff;
		}

		.headimg {
			width: 94rpx;
			height: 94rpx;
			border-radius: 50%;
			position: absolute;
			top: 16rpx;
			right: 78rpx;
		}

		.uni-text {
			position: absolute !important;
			right: 0rpx !important;
		}
	}

	.wrap_item {
		width: 750rpx;
		height: 126rpx;
		position: relative;
		background-color: #262342;
		margin: 0 auto;
		display: flex;
		align-items: center;

		.text {
			position: absolute;
			// top: 52rpx;
			left: 54rpx;
			font-size: 32rpx;
			color: #fff;
		}

		.sex {
			position: absolute;
			right: 100rpx;
			font-size: 32rpx;
			color: #A7A4AD;
		}

		.phone {
			position: absolute;
			right: 100rpx;
			font-size: 32rpx;
			color: #A7A4AD;

			>image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
		}

		.right {
			position: absolute;
			// top: 58rpx;
			right: 40rpx;
		}

		>input {
			position: absolute;
			// top: 52rpx;
			right: 92rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #fff;
			text-align: right;
			// background-color: red;
		}
	}

	.ipt {
		width: 654rpx;
		height: 304rpx;
		background: #3C2F65;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		margin: 0 auto;
		font-weight: 400;
		font-size: 26rpx;
		color: #fff !important;
		padding: 32rpx;
	}

	.btn {
		position: relative;
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
	.textareas{
		position: relative;
	}
	.textareas>textarea{
		font-size: 28rpx;
	}
	.surplus{
		position: absolute;
		bottom: 10rpx;
		right: 50rpx;
		font-size: 24rpx;
		color: #ffffff;
		z-index: 999;
	}
	/deep/.uni-input-placeholder {
		color: #A6A5AF !important;
	}
</style>